<template>
  <div class="search-suggestion">
    <van-cell
      @click="$emit('search', item)"
      v-for="(item, index) in list"
      :key="index"
      icon="search"
    >
      <template #title>
        <span v-html="hightColorText(item)"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestionApi } from "@/api/Search";
import { debounce } from "lodash";
export default {
  name: "SearchSuggestion",
  props: {
    // 输入框的内容
    searchText: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      list: [],
      // timer: null,
    };
  },
  watch: {
    //#region
    // 只要searchText变化，就调用获取数据方法！
    // 这样写的监听是需要等到组件创建成功之后的变化才可以被捕捉到！
    // 需要组件创建的时候就执行一次！
    // searchText() {
    //   this.initData();
    // },
    // searchText: {
    //   // deep:true/false, // 深浅监听
    //   handler() {
    //     // 防抖： 一段时间内触发某个事件，如果事件重新来则重新开始计算
    //     if (this.timer) {
    //       clearTimeout(this.timer);
    //     }
    //     this.timer = setTimeout(() => {
    //       this.initData();
    //     }, 200);
    //   },
    //   immediate: true, // 是否一开始就执行一次！
    // },
    //#endregion
    searchText: {
      // lodash.debounce(处理函数,时间) ===>返回一个新的防抖函数
      // handler: () => {
      //   this.initData();  // this指向的是window
      // },
      // handler: function () {
      //   this.initData(); // this指向当前组件实例
      // },
      handler: debounce(function () {
        console.log(this);
        this.initData();
      }, 300),
      immediate: true,
    },
  },
  // created() {
  //   // 我们输入框的值只要变化，我们就要把最新的内容提交给后台获取对应的搜索建议，而不是只执行一次！
  //   // created里面只会执行一次
  //   // this.initData();
  // },
  methods: {
    async initData() {
      try {
        let { data } = await getSearchSuggestionApi({ q: this.searchText });
        if (data.data.options.length === 1 && data.data.options[0] === null) {
          this.list = [];
        } else {
          this.list = data.data.options;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 搜索关键字高亮
    hightColorText(text) {
      // 学习
      // <span style="color:red;">学</span>习
      // 定义正则
      let reg = new RegExp(this.searchText, "gi"); // g是全局匹配； i 忽略大小写
      // 字符串.replace(正则，换成的内容)
      return text.replace(
        reg,
        `<span style="color:red;">${this.searchText}</span>`
      );
    },
  },
};
</script>
<style scoped lang="less"></style>
